<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <button v-if="$store.state.user.isLogin" @click="logout">注销</button>
    </nav>
    <!-- <transition name="route-move" mode="out-in"> -->
      <!-- mode="out-in" -->
    <transition :name="transitionName" mode="out-in">
    <router-view class="child-view"/>
    </transition>
    <cube-tab-bar
    v-model="selectedLabel"
    :data="tabs"
    @change="changeHandler">
    <cube-tab v-for="(item, index) in tabs" :icon="item.icon" :key="index" :label="item.value">
      <div>{{ item.label }}</div>
      <span class="badge" v-if="item.label == 'Cart'">{{ cartTotal }}</span>
    </cube-tab>
  </cube-tab-bar>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      transitionName: 'route-forward',
      selectedLabel: 'Vip',
      tabs: [{
        label: 'Home',
        value: '/',
        icon: 'cubeic-home'
      }, {
        label: 'Cart',
        value: '/cart',
        icon: 'cubeic-mall'
      }, {
        label: 'Vip',
        value: '/vip',
        icon: 'cubeic-vip'
      }, {
        label: 'Me',
        value: '/me',
        icon: 'cubeic-person'
      }]
    }
  },
  created() {
    //初始化页签设置，避免刷新页面后，页签不显示
    this.selectedLabel = this.$route.path
  },

  watch: {
    //监听路由变化，切换页签
    $route(route){
      this.selectedLabel = route.path

      this.transitionName = this.$router.transitionName
    }
  },

  computed: {
    ...mapGetters(['cartTotal'])
  },
  
  methods: {
    logout() {
      this.$store.dispatch('logout')
      this.$router.push('/login')
    },
    changeHandler(val){
      this.$router.push(val)
    }
  }

}
</script>

<style lang="stylus">
body{
  text-align: center
}
nav{
  margin: 20px auto
}
.cube-tab-bar{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #edf0f4;
}
.cube-tab-bar-slider{
  top:0;
}

//.route-move-enter{
 // transform: translate3d(-100%, 0, 0);
//}

//.route-move-leave-to{
 // transform: translate3d(100%, 0, 0);
//}

//.route-move-enter-active, .route-move-leave-active{ 
//  transition: transform .3s;
//}

.route-forward-enter{
  transform: translate3d(-100%, 0, 0);
}
.route-back-enter{
  transform: translate3d(100%, 0, 0);
}

.route-forward-leave-to{
  transform: translate3d(100%, 0, 0);
}
.route-back-leave-to{
  transform: translate3d(-100%, 0, 0);
}

.route-forward-enter-active,
.route-forward-leave-active,
.route-back-enter-active,
.route-back-leave-active{ 
  transition: transform .3s;
}

.child-view{
  position: absolute;
  left: 0;
  top: 60px;
  width: 100%;
  padding-bottom: 40px
}
.cube-tab{
  position: relative;
}
span.badge{
  background: red;
  color:white;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 15%;
  padding: 2px;
  min-width: 16px;
  min-height: 16px;
}

</style>
